<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
	  <a class="navbar-brand" href="#">规格添加</a>
</nav>

<form id="form" enctype="application/x-www-form-urlencoded" method="get">
  <div class="form-group row" >
    <label for="specName" class="col-sm-2 col-form-label">名称</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="specName" name="specName">
    </div>
  </div>
  
  <div class="form-group row">
    <label for="firstChar" class="col-sm-2 col-form-label">规格管理</label>
    <div class="col-sm-10">
     	<table id="table">
     		<tr>
     			<td>名称</td>
     			<td>排序</td>
     			<td>操作 
     			  <button type="button" class="btn btn-success btn-sm" onclick="addLine()">+</button>
     			
     			</td>
     		</tr>
     		<tr>
     			<td><input name="options[0].optionName" > </td>
     			<td><input name="options[0].orders"></td>
     			<td>
     				<button type="button" class="btn btn-success btn-sm" onclick="updateLine($(this))" >修改</button>
					<button type="button" class="btn btn-danger btn-sm"  onclick="delLine($(this))">删除</button>
					<button type="button" class="btn btn-danger btn-sm" onclick="saveLine($(this))">保存</button></td>
     		</tr>
     	</table>
     
    </div>
  </div>
  
  
  <div class="form-group row">
    <label for="file" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
      <button class="btn btn-primary mb-2" type="button" onclick="commitData()"> 提交</button>
    </div>
  </div>
  
  
</form>   
<script type="text/javascript">
  
  var index=0;

  function addLine(){
	  
	  index++;
	  //动态追加行
	  $("#table").append(`
			  <tr>
   			<td><input name="options[`+index+`].optionName"></td>
   			<td><input name="options[`+index+`].orders"></td>
   			<td>
   				<button type="button" class="btn btn-success btn-sm" onclick="updateLine($(this))">修改</button>
				<button type="button" class="btn btn-danger btn-sm"  onclick="delLine($(this))">删除</button>
				<button type="button" class="btn btn-danger btn-sm" onclick="saveLine($(this))">保存</button>
			</td>
   		</tr>
	  `)
  }

  function delLine(obj){
	  obj.parent().parent().remove();
  }
  
  // 保存行 也就是变成只读状态
  function saveLine(obj){
	  var tr = obj.parent().parent();
	  tr.children().each(function(){
		  $(this).children().prop("readonly","readonly")
	  });
  }
  
  function updateLine(obj){
	  var tr = obj.parent().parent();
	  tr.children().each(function(){
		  $(this).children().prop("readonly",false)
	  });
  }
  
	function commitData() {
		var formData = new FormData($("#form")[0]);
		$.ajax({
			url:"../spec/add",// 提交地址
			processData: false, //   application/x-www-form-urlencoded
			type:"post", // 
			contentType:false,// application/x-www-form-urlencoded
			data:formData,
			dataType:"json",  // 返回结果的数据格式
			success:function(data){
				//alert(data.code)
				$("#workContent").load("../spec/list")
			}
		})
	}

</script> 